
<div id='createEventDiv' class="form_container" style="width: 600px;">
	<form id='create_event_form'>
	<input type="hidden" name="eventId" id="eventId" value="{$event.calendar_event_id}"/>
	<table>
	<tr>
		<td colspan='10'>
			<div>
		       <span id="status_message" style="font-style: italic; color: red;"></span>
		   	</div>
	   	</td>
	</tr>	
	<tr>
		<td class='label'>{translate}Name{/translate}</td>
		<td colspan='9' ><input id="name" name="name" type="text" size="50" value="{$event.name}"/></td>		
	</tr>
	<tr>
		<td class='label'>{translate}Description{/translate}</td>
		<td colspan='9'><input id="description"  name="description" type="text" size="65" value="{$event.description}"/></td>
	</tr>
	<tr>
		<td class='label' >{translate}Từ ngày{/translate}</td>
		<td colspan='4'> <input type='text' size="6" class='date-pick' id='startDate' name='startDate' value='{$event.start_date}' ></td>
		<td class='label' >{translate}Đến ngày{/translate}</td>
		<td colspan='4'><input type='text' size="6" class='date-pick' id='endDate' name='endDate' value='{$event.end_date}' ></td>
	</tr>
	<tr>
		<td class='label' >{translate}Thời gian từ{/translate}</td>
		<td><input type='text' size="3" id='startHour' name='startHour' value='{$event.start_hour}' ></td>
		<td>giờ</td>
		<td><input type='text' size="3" id='startMinute' name='startMinute' value='{$event.start_minute}' ></td>
		<td>phút</td>
		<td class='label' >{translate}Đến{/translate}</td>
		<td><input type='text' size="3" id='endHour' name='endHour' value='{$event.end_hour}'></td>
		<td>{translate}giờ{/translate}</td>
		<td><input type='text' size="3" id='endMinute' name='endMinute' value='{$event.end_minute}' ></td>
		<td>{translate}phút{/translate}</td>
	</tr>
	<tr>
		<td class='label'>{translate}Lặp lại{/translate}</td>
		<td colspan='4'>
		<select id='select_recursive_type' name='select_recursive_type' onchange='javascript:choose_recursive_type();'>
			<option value='' selected='selected'>{translate}No{/translate}</option>
			<option value='1'>{translate}Hàng ngày{/translate}</option>
			<option value='2'>{translate}Hàng tuần{/translate}</option>
			<option value='3'>{translate}Hàng tháng{/translate}</option>
		</select>
		</td>
		<td colspan='5'>
			<div id='recursive_num_div' style='display:none;'>
				<span class='label'>{translate}Số lần lặp{/translate}</span> 
				<select id='select_recursive_num' name='select_recursive_num'>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
					<option value='7'>7</option>
					<option value='8'>8</option>
					<option value='9'>9</option>
					<option value='10'>10</option>
					<option value='11'>11</option>
					<option value='12'>12</option>
				</select>
				<span id='recursive_type_text'></span>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan='10'>
			<div id='check_dayWeek_div' style='display:none;'>
				<input type='checkbox' name='dayWeek[]' value='2'>{translate}Mon{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='3'>{translate}Tue{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='4'>{translate}Wed{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='5'>{translate}Thu{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='6'>{translate}Fri{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='7'>{translate}Sat{/translate}&nbsp;&nbsp;&nbsp;
				<input type='checkbox' name='dayWeek[]' value='8'>{translate}Sun{/translate}&nbsp;&nbsp;&nbsp;
			</div>	
		</td>
	</tr>
	</table>
	</form>
	<div>
	<table>
	<tr>
		<td colspan='8'>
			<div id="user_event_list"  >
				<table id="user_tbl" class="grid" cellspacing="0" cellpadding="0" width="400px">
					<caption><font size='2'>{translate}DANH SÁCH NHÂN VIÊN LÀM VIỆC THEO LỊCH{/translate}</font></caption>
					<thead>
						<tr><th class='first'>{translate}Name{/translate}</th>
							<th >{translate}Role{/translate}</th>
							<th class='last'>{translate}Act{/translate}</th>
						</tr>
					</thead>
					<tbody>
					<script type="text/javascript">
						var userArray = new Array();
						var action = '';
					</script>
					{foreach from=$user_list item=user}
					<script type="text/javascript">
						userArray.push({$user.person_id});
					</script>
						<tr id='{$user.person_id}_row'>
							<td class="first">{$user.name}</td>
							<td>{$user.employee_type}</td>
							<td center class='last'><a href='javascript:removeUser({$user.person_id});'>{translate}Unselect{/translate}</a></td>
						</tr>
					{/foreach}
					</tbody>
				</table>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan='10' align='right'>
			{if $event.calendar_event_id > 0}
			<div id='showEditButtonDiv' ><button onclick="javascript:saveEvent();">{translate}Save{/translate}</button>&nbsp;&nbsp;&nbsp;
				<button onclick="javascript:cancelEvent();">{translate}Cancel{/translate}</button>
			</div> 
			{else}
			<div id='showAddButtonDiv' ><button id='saveEvent' onclick="javascript:saveEvent()">{translate}Thêm mới{/translate}</button>
			</div>
			{/if}
		</td>				
	</tr>
	</table>
	</div>
</div>
<br/>
<div class='form_container' style='width: 500px;'>
	{include file="calendar_manager/element_search_employee.html"}
</div>

